[#9] 공통 dialog 컴포넌트 및 아이디어 개요 dialog #12
Conversation
There was a problem hiding this comment.
고생하셨습니다! 🔥🔥🔥
style 요소들 가능한 theme에 추가하면서 이를 활용하는 게 좋을 것 같습니다.
그리고 Dialog에 들어가는 글 내용들이 많은데 한 주제의 Dialog마다 줄마다 컴포넌트를 불러와서 작성하는 게 좋은 방법일까요 ?? markdown 형식으로 이를 관리한다면 더 쉽게 글을 쓸 수도 있을 것 같다는 생각이 드는데 의견 궁금합니다 👍🏻👍🏻
| ) | ||
| } | ||
|
|
||
| export default IdeaOutline |
There was a problem hiding this comment.
export default 를 쓰면 자동완성이나 ctrl + click할때 잘 동작하지 않아서 요즘은 export const로 쓰는 편입니다~
| fontSize?: number | ||
| fontWeight?: 300 | 400 | 700 | 800 | ||
| textAlign?: 'left' | 'center' | 'right' |
There was a problem hiding this comment.
import type { CSSProp } from 'styled-components';
declare module 'react' {
interface Attributes {
css?: CSSProp;
}
}다음 문법을 styled.d.ts에 이용하면 styled components의 css props를 사용할 수 있는데 보통 공통 컴포넌트를 구현할때는 font-size, font-weight, text-align등 처럼 이미 있는 css 속성은 css props를 통해 열어두고 커스텀 한 속성만을 component의 props로 주어서 처리합니다.
interface ButtonProps {
fullWidth: boolean; // 사용시 width: 100%로 잡아줌
}
<Button css={{fontSize: '18px', fontWeight: 700 }} fullWidth />예를 들어 이렇게 fullWidth같이 기존에 없는 속성은 props로 열어두고 이미 존재하는 속성은 css props으로 처리합니다.
| <DialogPrimitive.Trigger className={className} {...props}> | ||
| {children} | ||
| </DialogPrimitive.Trigger> |
There was a problem hiding this comment.
이 dot notation 방식이 잘되나 의문.. 이군용~ nextjs app router에서 dot notation을 쓰면 잘 안되는 이슈가 있어서요
|
수정하거나 추가 push 가 일어날때는 알람이 안가서 직접 코멘트를 남깁니다.
|
| const DialogTitleSizeStyles = css<StyledTitleProps>` | ||
| ${({ size }) => css` | ||
| font-size: ${DialogTitleSizes[size].fontSize}; | ||
| font-family: ${DialogTitleSizes[size].fontFamily}; |
| fontWeight: { | ||
| light: 300, | ||
| normal: 500, | ||
| normal: 400, // regular |
There was a problem hiding this comment.
당장은 없어두 될꺼같은데 그냥 냅뒀습니다... 삭제할까요??
|
🧑🏻💻 작업 내용
dialog 공통 컴포넌트를 개발하였습니다.
사용 예시로 아이디어 개요 dialog 를 개발하였습니다.
+추가
예시
🚀 중요한 포인트
아이디어 개요 dialog
변경전:
변경후:
최대한 figma 디자인과 가깝게 수정했습니다. (줄간격, 문자간격, 문단간격 등)
styled 구성요소과 styled component 사용 방식에 대해 이상한점이 있으면 피드백 해주세요.
주의: theme 의 grey 값의 범위가 변하였습니다. 값의 추가로 인해 grey500이 grey400 으로 변하였습니다.
공통 컴포넌트 제작방식을 변경하였습니다. 참고블로그